<template>
    <div id="userinfo">
        <div class="card">
            <div class="item dis-flex flex-x-between flex-y-center">
                <span>修改密码</span>
                <div class="right">
                    <img
                        src="https://tse4-mm.cn.bing.net/th/id/OIP-C.T_xid2XlbHAI-7P4HZoWJwAAAA?w=199&h=199&c=7&r=0&o=5&dpr=1.3&pid=1.7"
                        alt=""
                    />
                    <van-icon name="arrow" color="#979797" size="0.4267rem" />
                </div>
            </div>
            <div class="item dis-flex flex-x-between flex-y-center">
                <span>昵称</span>
                <div class="right">
                    <span>丢丢不丢</span>
                    <van-icon name="arrow" color="#979797" size="0.4267rem" />
                </div>
            </div>
            <div class="item dis-flex flex-x-between flex-y-center">
                <span>姓名</span>
                <div class="right">
                    <span>丢丢不丢</span>
                    <van-icon name="arrow" color="#979797" size="0.4267rem" />
                </div>
            </div>
            <div class="item dis-flex flex-x-between flex-y-center">
                <span>手机号</span>
                <div class="right">
                    <span>丢丢不丢</span>
                    <van-icon name="arrow" color="#979797" size="0.4267rem" />
                </div>
            </div>
            <div class="item dis-flex flex-x-between flex-y-center">
                <span>微信号</span>
                <div class="right">
                    <span>丢丢不丢</span>
                    <van-icon name="arrow" color="#979797" size="0.4267rem" />
                </div>
            </div>
        </div>
        <div class="tips">
            <span>填写须知：</span>
            <span>1. 点击头像可以获取微信头像和昵称。 </span>
            <span
                >2.头像、姓名、手机号、微信号完善后，下级用户可以在联系客服里面联系到你。</span
            >
        </div>
    </div>
</template>

<script>
    export default {
        props: [], // 父辈向子辈传参
        name: 'userinfo',
        components: { // 组件的引用

        },
        data() {
            return {

            }
        },
        methods: {},
        computed: {},
        watch: {},
        created() { },
        mounted() { },
    }
</script>
    
<style scoped lang='scss'>
    #userinfo {
        padding: 0 15px;
        .card {
            width: 345px;
            height: 279px;
            background: #ffffff;
            border-radius: 10px 10px 10px 10px;
            box-sizing: border-box;
            margin: 16px auto;
            padding: 0 15px;
        }
        .item {
            font-family: PingFang SC, PingFang SC;
            font-weight: 400;
            font-size: 15px;
            color: #1a1a1a;
            line-height: 21px;
            height: 55px;
        }
        .item:not(:last-child) {
            border-bottom: 1px solid #ececec;
        }
        .right {
            display: flex;
            align-items: center;
        }
        .right > img {
            width: 40px;
            height: 40px;
            margin-right: 5px;
            border-radius: 50%;
        }
        .right > span {
            margin-right: 5px;
        }

        .tips {
            font-family: PingFang SC, PingFang SC;
            font-weight: 400;
            font-size: 12px;
            color: #999999;
            line-height: 18px;
            display: flex;
            flex-direction: column;
        }
    }
</style>